<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Proton - Admin Template</title>

	<!-- Import google fonts - Heading first/ text second -->

	<!--[if lt IE 9]>
	<link href="http://fonts.useso.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css"/>
	<link href="http://fonts.useso.com/css?family=Open+Sans:700" rel="stylesheet" type="text/css"/>
	<link href="http://fonts.useso.com/css?family=Droid+Sans:400" rel="stylesheet" type="text/css"/>
	<link href="http://fonts.useso.com/css?family=Droid+Sans:700" rel="stylesheet" type="text/css"/>
	<![endif]-->

	<!-- Favicon and touch icons -->
	<link rel="shortcut icon" href="../assets/ico/favicon.ico" type="image/x-icon"/>

	<!-- Css files -->
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="../assets/css/jquery.mmenu.css" rel="stylesheet">
	<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
	<link href="../assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
	<link href="../assets/css/style.min.css" rel="stylesheet">
	<link href="../assets/css/add-ons.min.css" rel="stylesheet">
	<link href="../bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!-- start: JavaScript-->
	<!--[if !IE]>-->

	<script src="../assets/js/jquery-2.1.1.min.js"></script>

	<!--<![endif]-->

	<!--[if IE]>

	<script src="../assets/js/jquery-1.11.1.min.js"></script>

	<![endif]-->

	<!--[if !IE]>-->

	<script type="text/javascript">
        window.jQuery || document.write("<script src='assets/js/jquery-2.1.1.min.js'>" + "<" + "/script>");
	</script>

	<!--<![endif]-->

	<!--[if IE]>

	<script type="text/javascript">
		window.jQuery || document.write("<script src='assets/js/jquery-1.11.1.min.js'>" + "<" + "/script>");
	</script>

	<![endif]-->
	<script src="../assets/js/jquery-migrate-1.2.1.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>


	<!-- page scripts -->
	<script src="../assets/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
	<script src="../assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
	<script src="../assets/plugins/datatables/js/dataTables.bootstrap.min.js"></script>

	<!-- theme scripts -->
	<script src="../assets/js/SmoothScroll.js"></script>
	<script src="../assets/js/jquery.mmenu.min.js"></script>
	<script src="../assets/js/core.min.js"></script>

	<!-- bootstrap table -->
	<script src="../bootstrap-table-develop/dist/bootstrap-table.js"></script>
	<script src="../bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

	<!-- inline scripts related to this page -->
	<!--<script src="../assets/js/pages/table.js"></script>-->


	<!-- end: JavaScript-->
</head>
</head>

<body>
<!-- start: Header -->
<div class="navbar" role="navigation">

	<div class="container-fluid">

		<ul class="nav navbar-nav navbar-right">

			<li><a href="/logout"><i class="fa fa-power-off"></i></a></li>
		</ul>

	</div>

</div>
<!-- end: Header -->

<div class="container-fluid content">

	<div class="row">

		<!-- start: Main Menu -->
		<div class="sidebar ">

			<div class="sidebar-collapse">
				<div class="sidebar-header t-center">
                    <span><img class="text-logo" src="../assets/img/logo1.png"><i
							class="fa fa-space-shuttle fa-3x blue"></i></span>
				</div>
				<div class="sidebar-menu">
					<ul class="nav nav-sidebar">
						<li><a href="/articleManager/index"><i class="fa fa-laptop"></i><span class="text"> 信息管理</span></a></li>
						<!--<li>
							<a href="#"><i class="fa fa-file-text"></i><span class="text"> Pages</span> <span
									class="fa fa-angle-down pull-right"></span></a>
							<ul class="nav sub">
								<li><a href="page-activity.html"><i class="fa fa-car"></i><span
										class="text"> Activity</span></a></li>
								<li><a href="page-inbox.html"><i class="fa fa-envelope"></i><span
										class="text"> Mail</span></a></li>
								<li><a href="page-invoice.html"><i class="fa fa-credit-card"></i><span class="text"> Invoice</span></a>
								</li>
								<li><a href="page-profile.html"><i class="fa fa-heart-o"></i><span
										class="text"> Profile</span></a></li>
								<li><a href="page-pricing-tables.html"><i class="fa fa-columns"></i><span class="text"> Pricing Tables</span></a>
								</li>
								<li><a href="page-404.html"><i class="fa fa-puzzle-piece"></i><span
										class="text"> 404</span></a></li>
								<li><a href="page-500.html"><i class="fa fa-puzzle-piece"></i><span
										class="text"> 500</span></a></li>
								<li><a href="page-lockscreen.html"><i class="fa fa-lock"></i><span class="text"> LockScreen1</span></a>
								</li>
								<li><a href="page-lockscreen2.html"><i class="fa fa-lock"></i><span class="text"> LockScreen2</span></a>
								</li>
								<li><a href="page-login.html"><i class="fa fa-key"></i><span
										class="text"> Login Page</span></a></li>
								<li><a href="page-register.html"><i class="fa fa-sign-in"></i><span class="text"> Register Page</span></a>
								</li>
							</ul>
						</li>-->
					</ul>
				</div>
			</div>
			<div class="sidebar-footer">

				<div class="sidebar-brand">
					Proton
				</div>



				<div class="copyright text-center">
					<small>Proton <i class="fa fa-coffee"></i> from <a href="http://www.cssmoban.com/" title="网页模板"
																	   target="_blank">网页模板</a></small>
				</div>
			</div>

		</div>
		<!-- end: Main Menu -->

		<!-- start: Content -->
		<div class="main sidebar-minified">

			<div class="row">
				<div class="col-lg-12">
					<h3 class="page-header"><i class="fa fa-table"></i>Tables</h3>
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.html">Home</a></li>
						<li><i class="fa fa-table"></i>Tables</li>
					</ol>
				</div>
			</div>

			<div class="row">

				<!-- Striped Table -->
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h2><i class="fa fa-table red"></i><span class="break"></span><strong>Striped Table</strong>
							</h2>
						</div>

						<div class="panel-body">
							<div class="form-group">
								<div class="col-xs-2">
									<input id="o_mc" type="text" class="form-control" placeholder="名称...">
								</div>
								<div class="col-xs-2">
									<div class="controls">
										<select id="o_fl" class="form-control" data-rel="chosen">
											<option value="">所有栏目</option>
											<option value="公益活动">公益活动</option>
											<option value="企业刊物">企业刊物</option>
											<option value="政策解读">政策解读</option>
											<option value="涉税筹划">涉税筹划</option>
											<option value="政策法规">政策法规</option>
											<option value="公司新闻">公司新闻</option>
											<option value="行业资讯">行业资讯</option>
											<option value="视频新闻">视频新闻</option>
											<option value="专业文章">专业文章</option>
											<option value="相关法规">相关法规</option>
											<option value="视频资料">视频资料</option>
											<option value="服务范围">服务范围</option>
										</select>
									</div>
								</div>
								<button id="search" type="button" style="height: 33px" class="btn btn-sm btn-success"><i
										class="fa fa-dot-circle-o"></i> 查询
								</button>
							</div>
						</div>


						<div class="panel-body">
							<table id="correlativeAnalysis" class="table table-striped" width="100%">

							</table>

						</div>
					</div>
				</div><!--/col-->
			</div><!--/row-->

		</div>
		<!-- end: Content -->
		<br><br><br>

	</div><!--/container-->


	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					<p>Here settings can be configured...</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="clearfix"></div>


	<script>

        // 初始化表格
        function initTable(o_mc, o_fl){
            // 表格初始化数据
            $("#correlativeAnalysis").bootstrapTable({
                scriptCharset: 'utf-8',
                url: '/articleManager/getData',        //请求后台的URL（*）
                method: 'post',
                contentType: "application/x-www-form-urlencoded;charset=UTF-8", // 如果后台要通过request获取数据，必须加这一行
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                queryParams: function (params) {
                    var off = params.offset;
                    if (off != 0) {
                        off = off / this.pageSize;
                    }
                    off += 1;
                    var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,   //页面大小
                        offset: off,  //页码
                        o_mc: o_mc,
                        o_fl: o_fl
                    };
                    return temp;
                },
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                columns: [
                    {
                        field: 'o_id',
                        title: '文章编号',
                        align: 'center'
                    },
                    {
                        field: 'o_mc',
                        title: '名称',
                        align: 'center'
                    },
                    {
                        field: 'o_rq',
                        title: '日期',
                        align: 'center'
                    },
                    {
                        field: 'o_dj',
                        title: '点击数',
                        align: 'center'
                    },
                    {
                        field: 'name',
                        title: '分类',
                        align: 'center'
                    },
                ]
            });
        }
        $(function () {
            initTable('', '');
            // 搜索
            $('#search').click(function () {
                var o_mc = $('#o_mc').val();
                var o_fl = $('#o_fl').val();
                $("#correlativeAnalysis").bootstrapTable('refresh',{
                    query: {
                        limit: 10,   //页面大小
                        offset: 1,  //页码
                        o_mc: o_mc,
                        o_fl: o_fl
                    }
                });
            });
        });
	</script>
</div>
</body>
</html>